import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './hxroll.css'

/**
 * 红袖添香横向滚动
 */
class HxRoll extends Component {

    static propTypes = {
        data: PropTypes.arrayOf(PropTypes.shape({
            link: PropTypes.string.isRequired,
            img: PropTypes.string.isRequired,
            title: PropTypes.string.isRequired,
            author: PropTypes.string.isRequired
        })).isRequired
    }

    state = {
        data: [],
        ulstyle: { left: 0, transition: 'left 1s' },
        stop: false,

    }

    componentDidMount = () => {
        this.setState({ data: this.props.data })

        setInterval(() => {
            console.log(this.state.stop)
            if (!this.state.stop) {
                this.next()
            }
        }, 2000)
    }

    next = () => {
        this.setState({ ulstyle: { left: this.state.ulstyle.left - 169, transition: 'left 1s' } })
        setTimeout(() => {
            const data = this.state.data
            const first = data.shift();
            data.push(first)
            this.setState({ data })
            this.setState({ ulstyle: { left: 0, transition: 'left 0s' } })
        }, 1000)
    }

    pre = () => {
        this.setState({ ulstyle: { left: this.state.ulstyle.left + 169, transition: 'left 1s' } })
        setTimeout(() => {
            const data = this.state.data
            const last = data.pop();
            data.unshift(last)
            this.setState({ data })
            this.setState({ ulstyle: { left: 0, transition: 'left 0s' } })
        }, 1000)
    }

    caca=()=>{
        console.log('ca')
        this.setState({stop:true})
    }

    render() {
        return (
            <div className="hxroll" onMouseEnter={this.caca} onMouseLeave={()=>this.setState({stop:false})}>
                <ul style={this.state.ulstyle}>
                    {this.props.data.map((val, key) => (
                        <li key={key}>
                            <div className="content">
                                <p className="face"><a href={val.link}><img src={val.img} /></a></p>
                                <p className="title"><a href={val.link}>{val.title}</a></p>
                                <p className="author">{val.author}</p>
                            </div>
                        </li>
                    ))}
                </ul>
            </div>
        )
    }
}

export default HxRoll